<template>
  <div class="main">
    <div class="listTop">
      <header class="head">
        <van-icon name="arrow-left" class="reBtn" @click="reBack()" />
        {{ topFont }}
      </header>
      <div class="record-cc" style="margin-top: 10px;">

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="record-item" v-for="(item, index) in recordList">
            <div class="record-time">
              <span style="font-size: 14px;color: #000;">{{ index + 1 }}.</span>
              <span style="font-size: 14px;color: #000;margin: 0 5px;">商机名称</span>
            </div>
            <div class="address">描述信息描述信息描述信息描述信息描述信息描述信息描述信息</div>
            <div class="line1"></div>
          </div>
        </van-list>

      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import moment from "moment"
export default {
  data() {
    return {
      font: "",
      checked: false,
      loading: false,
      finished: false,
      topFont: "商机列表",
      id: "",
      timer: "",
      action: "",
      currentTime: "",
      recordList: [],
      processInstanceId: "",
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    ...mapActions({
      completeTask: "pageApi/completeTask",
    }),
    tabAct(index) {
      this.act = index;
    },
    getNowTime() {
      this.currentTime = moment().format('HH:mm:ss');
    },
    reBack() {
      this.$router.go(-1);
    },
    jump() {
      this.$router.push({ name: "main" });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.recordList.push(this.recordList.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.recordList.length >= 20) {
          this.finished = true;
        }
      }, 500);
    },
    formatDate(dates) {
      let date = new Date();
      let YY = date.getFullYear() + "-";
      let MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let DD =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      let hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let ss =
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()) +
        "";
      return YY + MM + DD + hh + mm + ss;
    },
    submit() {
      if (this.font == "") {
        this.$toast("请输入审批意见");
        return false;
      }

      this.completeTask({
        loginId:
          this.$route.query.loginId || window.sessionStorage.getItem("loginId"),
        action: this.action,
        taskId: this.id,
        message: this.font,
        processInstanceId: this.processInstanceId,
        procStartTime: this.formatDate(),
      }).then((res) => {
        if (res.data.success) {
          this.$toast("操作成功");
          if (this.action == "pass") {
            this.topFont = "审批通过";
          } else {
            this.topFont = "审批驳回";
          }
          setTimeout(() => {
            this.$router.push({ name: "main" });
          }, 1500);
        } else {
          this.$toast(res.data.error);
        }
      });
      // this.checked=true;
    },
  },
};
</script>

<style lang="scss" scoped type='text/css'>
.main {
  background-color: #f3f3f3;
  width: 100%;
  height: 100%;
}

.listTop {
  height: 100%;
  color: #333;
  background: #fff;

  .head {
    font-size: 3.4rem;
    text-align: center;
    position: relative;
    color: #fff;
    padding: 3rem 0 3rem;
    background: #4673FB;

    .reBtn {
      position: absolute;
      left: 1.5rem;
      top: 2.5rem;
      font-size: 4.8rem;
    }
  }
}

.title {
  color: #333;
  font-size: 3rem;
  font-weight: 560;
  padding: 3rem 2.4rem;
  font-family: "黑体";
}


.record-cc {
  width: 100%;
  height: 90%;
  overflow: auto;
  padding: 0 2rem;

  .record-item {
    margin-bottom: 25px;
    width: 100%;

    .record-time {
      width: 100%;
      display: flex;
      align-items: center;
      height: 20px;
      line-height: 20px;

      i {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #DDDDDD;
      }
    }

    .address {
      color: #666;
      font-size: 14px;
      margin-top: 8px;
      padding-left: 8px
    }

  }
}

.submit {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 8.8rem;
  width: 55rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.jump {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 6.4rem;
  width: 28rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.img {
  width: 40rem;
  height: 40rem;
  display: block;
  margin: 18rem auto 4.8rem;
}

.tips {
  color: #999;
  font-size: 2.8rem;
  margin-bottom: 8rem;
  text-align: center;
}

.line1 {
  width: 100%;
  height: 0.5px;
  background: #e0e0e0;
  margin-top: 10px;
}
</style>